<template>
    <div>
      <div class="weui-cells form weui-cells_form">
        <div class="weui-cell v-center">
          {{manager}}<b>(PI)</b>
        </div>
        <el-divider></el-divider>
        <div v-for="data in module" :key="data.id">
          <div class="row">
              <span>
                <svg class="icon iconMargin" aria-hidden="true">
                  <use xlink:href="#iconren"></use>
                </svg>
                {{data.leaderName}}<b>(PR)</b>
              </span>
            <span class="delIcon">
                <svg class="icon fuzerenIcon" aria-hidden="true">
                  <use xlink:href="#iconmokuai"></use>
                </svg>
                  <span>
                {{data.name}}
                  </span>
              </span>
          </div>
          <el-divider></el-divider>
          <div v-for="item of data.missions" :key="item.id">
            <div class="row">
              <span>
                <svg class="icon projectIcon" aria-hidden="true">
                  <use xlink:href="#iconfuzeren"></use>
                </svg>
                <span style="color: #757575;">
                {{item.ownerName}}
                  </span>
              </span>
              <span class="delIcon">
                <svg class="icon fuzerenIcon" aria-hidden="true">
                  <use xlink:href="#iconrenwu"></use>
                </svg>
                  <span style="color: #757575;">
                {{item.name}}
                  </span>
              </span>
            </div>
            <div class="divider">
              <el-divider></el-divider>
            </div>
          </div>
        </div>
      </div>
    </div>
</template>

<script>
import axios from 'axios'
export default {
  name: 'projectFrameFramework',
  data () {
    return {
      manager: '',
      mission: [],
      module: [],
      leader: ''
    }
  },
  methods: {
    getFramework () {
      axios.get(this.url + '/project/frame/' + sessionStorage.getItem('pid'))
        .then(this.getFrameworkSucc)
    },
    getFrameworkSucc (res) {
      if (res.status !== 200) {
        alert('该项目暂无架构！')
        this.$router.push('./frame')
      } else {
        res = res.data
        this.manager = res.managerName
        this.module = res.modules
        this.mission = res.modules.missions
      }
    },
    handleChange (val) {
      console.log(val)
    }
  },
  mounted () {
    this.getFramework()
  }
}
</script>

<style lang="stylus" scoped>
  .header
    color $headerFontColor
    background $headerBgColor
    position: relative
    line-height: $headerHeight
  .right
    padding-left: 1.2rem
  .iconMargin
    margin-right .5rem
  .textColor
    color #0D0D0D
  .iconColor
    color #0D0D0D
  .right
    float: right
  .iconMargin
    margin-right .3rem
  .textColor
    color #0D0D0D
  .iconColor
    color #88d4ff
  .taskIcon
    color #16b0ff
  .row
    margin-top .6rem
    margin-left .5rem
    margin-bottom .6rem
  .delIcon
    float right
    margin-right .5rem
    color #757575
  .fuzerenIcon
    margin-right .3rem
    color #757575
  .projectIcon
    margin-right .35rem
  .divider
    margin-top .5rem
</style>
